<template>
	<view class="">
		
			<view class="body" >
				<view class="top-container no-bottom-padding">
					<uni-list :border="false">
					
						 <uni-list-item :border="false" title="生产任务单编号" :rightText="hcdetail.length > 0 ? hcdetail[0].fbillno : ''" />
						  <uni-list-item :border="false" title="父项物料名称" :rightText="hcdetail.length > 0 ? hcdetail[0].fmaterialname : ''" />
						      <uni-list-item :border="false" title="父项物料编码" :rightText="hcdetail.length > 0 ? hcdetail[0].fmaterialnumber : ''" />
						      <uni-list-item :border="false" title="BOM版本" :rightText="hcheader.length > 0 ? hcheader[0].fbomid : ''" />
						      <uni-list-item :border="false" title="数量" :rightText="hcdetail.length > 0 ? String(hcdetail[0].fqty) : ''" />
						      <uni-list-item :border="false" title="日期">
						        <template v-slot:footer>
						          <uni-dateformat v-if="hcdetail.length > 0" :date="hcdetail[0].fcreatedate" format="yyyy年MM月dd日 hh:mm:ss"></uni-dateformat>
						        </template>
						      </uni-list-item>		
					</uni-list>
				</view>
				
				
				<template v-if="indetail && indetail.length > 0">
					<view class="list-pagination">
						<view class="list-pagination-inner">
							<view class="item-sticky">
								<view class="title">入库明细</view>
								<view class="extra">{{indetail.length}}条</view>
							</view>
						</view>
					</view>
				<!-- 	<view class="" v-for="(item,index) in indetail.slice(0, 1)" :key = "item.id || index"> -->
						<view class="panel" @click="openStockDetail(indetail[0], null , 'inStock')"> 
				
							 <view class="panel_content">
								<view class="panel_content_row">
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">总数量：</view>
										<view class="panel_content_row_item_value">{{ hcdetail.length > 0 ? String(hcdetail[0].fqty) : '' }}</view>
									</view>
								
								</view>
							</view>
							<view class="panel_content">
								<view class="panel_content_row">
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">已入数量：</view>
										<view class="panel_content_row_item_value">{{ totalInfactQty }}</view>
									</view>
							
								</view>
							</view>
							
						</view>
					<!-- </view> -->
					
				</template>
				
				<template v-if="hcheader && hcheader.length > 0">
					<view class="list-pagination">
						<view class="list-pagination-inner">
							<view class="item-sticky">
								<view class="title">子项明细</view>
								<view class="extra">{{chdatail.length}}条</view>
							</view>
						</view>
					</view>
					<view class="" v-for="(item,index) in hcheader" :key = "item.id || index">
						<view class="panel" @click="openChDetail(item, index, '')">
						
							<view class="panel_content">
								<view class="panel_content_row">
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">编码：</view>
										<view class="panel_content_row_item_value">{{ item.fmaterialnumber }}</view>
									</view> 
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">名称：</view>
									<view class="panel_content_row_item_value">{{ item.fmaterialname }}</view>
								</view> 
								</view>
							</view>
							<view class="panel_content">
								<view class="panel_content_row">
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">规格：</view>
										<view class="panel_content_row_item_value">{{ item.funitname }}</view>
									</view> 
								
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">单位：</view>
										<view class="panel_content_row_item_value">{{ item.funitname }}</view>
									</view>
								</view>
							</view>
							<view class="panel_content">
								<view class="panel_content_row">
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">应发数量：</view>
										<view class="panel_content_row_item_value">{{ item.fmustqty }}</view>
									</view>
									
									<view class="panel_content_row_item">
										<view class="panel_content_row_item_title">已领数量：</view>
										<view class="panel_content_row_item_value">{{ item.finfactqty }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>	
			<!--  底部按钮 -->
			<view class="footerPanel">
				<view class="footerPanel_body">
					<button @click="goBack" class="footerBtn scan" type="primary"><i></i>返回
					</button>
				</view>
			</view>
			<!-- 子项详情 -->
			<chDetail ref="detailRef"></chDetail>
			<!-- 入库明细 -->
			<stockDetail ref="stockPef" ></stockDetail>
	</view>
</template>

<script>
	import {getMoListHistory,
	getChildHistoryDetail} from '@/utils/api.js'
	import chDetail from "../pop/datail-history-material.vue"
	import stockDetail from "../pop/datail-history-instock.vue"
	
	
	export default {
		components: {
			chDetail,
			stockDetail,
		
		},
		 data() {
		    return {
				pageConfig: {
					pageIndex: 0,
					pageSize: 1,
				
				},
		      taskBillNo: '',
			  hcheader:{},
			  hcdetail:[],
			  indetail:[],
			  chdatail:[],
		
		    }
		},
		  


		onLoad(e){
			if (e.taskBillNo) {
				this.taskBillNo = e.taskBillNo
			
					this.FPRDORGID = e.FPRDORGID
				// 获取详情数据
				this.initData()
			}
			
		},
		  computed: {
		    totalInfactQty() {
		      return this.indetail.reduce((sum, item) => sum + item.finfactqty, 0);
		    }
		  },
	methods:{
		/**
		 * 查看仓库详情
		 */
	openStockDetail(insdetail, s, type) {
	  let self = this
	  getChildHistoryDetail({
	  	billNo: this.taskBillNo,
	  }).then(res =>{
	  	if (res.data.status == 200){
	  		self.insdetailList = res.data.data.indata ?? []
	  		let param = {
	  			title: '入库详情',
	  			indata: self.insdetailList,
	  			billNo : self.taskBillNo,
				type: ' inStock' // 将 type 传递给 param
	  		}
	  		self.detailIndex = s
	  		self.$refs.stockPef.open(param)
	  	}
	  })
	},	
	openChDetail(chpickdetail, c, type) {
	  let self = this
	  getChildHistoryDetail({
	  	billNo: this.taskBillNo,
	  }).then(res =>{
	  	if (res.data.status == 200){
	  		self.chpickdetail = res.data.data.pcdata ?? []
	  		let param = {
	  			title: '领料详情',
	  			pcdata: self.chpickdetail,
	  			billNo : self.taskBillNo,
				type: 'chpick' // 将 type 传递给 param
	  		}
	  		self.detailIndex = c
	  		self.$refs.detailRef.open(param)
	  	}
	  })
	},
		
		// 获取详情数据
			initChildHistoryDetail() {
			
			      getChildHistoryDetail({ 
			       billNo: this.taskBillNo,
				   
			      }).then(res => {
			                  this.chdatail = res.data.data.pcdata;
			                  this.indetail = res.data.data.indata;
			      }).catch(err => {
			        console.error('API Error:', err);
			      });
			    },
				 initMoListHistory() {
				      getMoListHistory({ 
				        pageSize: this.pageConfig.pageSize,
				        pageIndex: this.pageConfig.pageIndex,
				        billNo: this.taskBillNo || ""
				      }).then(res => {
				          this.hcheader = res.data.data.data;
				          this.hcdetail = res.data.data.dataList;
				      }).catch(err => {
				        console.error('API Error:', err);
				      });
				    },
		 initData() {
		      this.initChildHistoryDetail();
		      this.initMoListHistory();
		    },
			goBack() {
            uni.navigateBack({
                delta: 1 // 返回上一页
            });
        }
		  },
		

	 created() {
	   this.initData();
	 
	   
	 },
	 watch: {
			userInfo() {
			
				}
			},
}
</script>
<style  lang="scss"  scoped>
	@import "../../static/css/common";

	
	.list-pagination {
		position: -webkit-sticky;
		/* Safari 和 iOS 版 Chrome 需要加上 -webkit- 前缀 */
		position: sticky;
		/* #ifdef APP-PLUS */
		top: 0px;
		/* #endif */
		/* #ifndef APP-PLUS */
		top: 44px;
		/* #endif */
		/* 距离父元素顶部的距离为0 */
		z-index: 1;
	
		.list-pagination-inner {
			box-sizing: border-box;
			background-color: #f8f8f8;
			
			.item-sticky {
				background-color: #fff;
				position: relative;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 12px 15px;
				padding-left: 15px;
				flex: 1;
				overflow: hidden;
				
				.title {
					font-size: 14px;
					color: #3b4144;
					overflow: hidden;
				}
	
				.extra {
					color: #999;
					font-size: 12px;
					
				}
			}
	
			.pagination {
				padding: 8px 10px;
			}
		}
	}
	.btn-item{
		width: 70px;
		
		color: $primary;
		border: 1px solid $primary;
		align-items: center;
		justify-content: center;
		padding: 0 15px;
		border-radius: 4px;
	}
</style>
